<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="main">
      <div class="topnav">
        <h1>搞事情</h1>
      </div>
      <div class="header">
        <div class="wrap">
          游戏打完了吗就写作业
        </div>
      </div>
      <taskform :show="show" :current="current"></taskform>
      <div class="tasklist">
        <div class="wrap">
          未完成
          <task  :todo="todo"
                 :index="index"
                 v-if="!todo.completed"
                 v-for="(todo, index) in list"
          ></task>
        </div>
      </div>
      <div class="tasklist">
        <div class="wrap">
          已完成
          <div id="finish" v-if="todo.completed" v-for="(todo, index) in list" class="item">
            <button type="button"></button>
            {{todo.title}}
            <button type="button" @click="remove(index)"></button>
          </div>
        </div>
      </div>
    </div>
    <audio id="music">
      <source src="sound/goodbye.mp3">
    </audio>
    <template id="task">
      <div id="unfinish" class="item">
        <button type="button" @click="action('toggleComplete', todo.id)"></button>
        {{todo.title}}
        <button type="button" @click="action('setCurrent', todo)"></button>
        <button type="button" @click="action('remove', index)"></button>
      </div>
    </template>
    <template id="taskform">
      <form @submit.prevent="action('merge')">
        <div class="wrap">
          <div class="input-wrap">
            <input v-model="current.title" type="text" />
            <button id="addTask" title="添加" type="submit">
              <img src="image/1.gif"/ >
            </button>
            <button id="showDet" title="显示细节" type="button" @click="action('showDetail')">
              <img src="image/2.gif"/ >
            </button>
          </div>
          <div v-if="show" class="detail">
            <textarea v-model="current.desc"></textarea>
            <input v-model="current.alertTime" type="datetime-local" />
          </div>
        </div>
      </form>
    </template>
    <script src="lib/vue.js"></script>
    <script src="lib/jquery.js"></script>
    <script src="js/localStorage.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
